<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报修工单</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    #chaxuntiaojian2{
        border: 1px solid gainsboro;
        width:350px;
        height:200px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>报修信息</legend>
</fieldset>
<div>
    <button type="button" class="layui-btn layui-btn-normal" id="chaxuntiaojian">查询条件</button>
</div>
<div class="layui-btn-group" style="margin-left:700px;margin-top: -60px;">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">登记</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">受理&派工</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">收费</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">业务完成</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">回访</i></button>
    <button type="button" lay-submit="" class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="uploadImg"><i class="layui-icon"></i>导出Excel</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">详情</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">撤销</i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">删除</i></button>
</div>
<form class="layui-form" action="">
<div id="chaxuntiaojian2" style="display: none;">
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test6" placeholder=" - ">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 300px;">
        <label class="layui-form-label">区域选择：</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="">==请选择==</option>
                <option value="0">写作</option>
                <option value="1">阅读</option>
                <option value="2">游戏</option>
                <option value="3">音乐</option>
                <option value="4">旅行</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="width: 300px;">
        <label class="layui-form-label">工单状态：</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao">
                <option value="">==请选择==</option>
                <option value="0">写作</option>
                <option value="1">阅读</option>
                <option value="2">游戏</option>
                <option value="3">音乐</option>
                <option value="4">旅行</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="chaxun3">查询</button>
        </div>
    </div>
</div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
</form>
</body>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#test6'
            ,range: true
        });
    });
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/demo/table/user/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'username', width:80, title: '管理区'}
                ,{field:'sex', width:100, title: '房间编号'}
                ,{field:'city', width:80, title: '联系人'}
                ,{field:'sign', title: '联系电话', width: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'experience',width:100, title: '报修类型'}
                ,{field:'score', width:100,title: '报修项目'}
                ,{field:'classify',width:100, title: '问题描述'}
                ,{field:'classify2',width:100, title: '状态'}
                ,{field:'classify3',width:100, title: '申请时间'}
                ,{field:'classify4',width:100, title: '预约时间'}
                ,{field:'classify5',width:100, title: '完成时间'}
                ,{field:'wealth',width:100, title: '完成人'}
                ,{field:'classify5',width:100, title: '完成备注'}
                ,{field:'classify5',width:100, title: '是否收费'}
                ,{field:'classify5',width:100, title: '报修图片'}
                ,{field:'classify5',width:100, title: '要求完成时间'}
                ,{field:'classify5',width:100, title: '来源'}
                ,{field:'classify5',width:100, title: '重要程度'}
                ,{field:'classify5',width:100, title: '工单编号'}
            ]]
            ,page:true
        });
    });

    var c=$("#chaxuntiaojian2")[0];
    $("#chaxuntiaojian").click(function(){
        if(c.style.display="none"){
            c.style.display="block";
        }
   })
</script>
</html>